<template>
    <div class="detail">
        <!-- 顶部导航 -->
        <div class="nav-header">
            <div class="left">
                <img class="back" @click="$router.back()" src="@/assets/img/arrow-left.svg" alt="">
                <div class="userBox">
                    <img class="avatar" :src="data.aut_photo" alt="">
                    <span class="name">{{ data.aut_name }}</span>
                    <span class="line"></span>
                    <span class="follow" ref="follow" @click="following">关注</span>
                </div>
            </div>
            <!-- 分享按钮 -->
            <img class="share" @click="showShare = true" src="@/assets/img/icon.svg" alt="">
        </div>

        <!-- 分享弹出页 -->
        <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
        />

        <!-- 文章详情顶部 -->
        <div class="detailHeader">
            <p class="title">{{ data.title }}</p>
            <div class="tagInfo">
                <span>{{ data.read_count }} 阅读</span><span class="line"></span>
                <span>{{ 2023 }}</span><span class="line"></span>
                <span>{{ data.comm_count }} 评论</span>
            </div>
            <div class="user">
                <div>
                    <img :src="data.aut_photo" alt="" class="avatar">
                    <p class="username">{{ data.aut_name }}</p>
                </div>
                <button class="btnFollow" ref="btnFollow" @click="following">关注</button>
            </div>
        </div>

        <!-- 文章内容主体 -->
        <div class="main">
            <div class="content" v-html="data.content" v-highlight></div>
            <p class="createTime">文章发布时间：{{ data.pubdate }}</p>
        </div>

        <div class="division"></div>

        <!-- 评论区主体 -->
        <div class="comment">
            <!-- 评论区顶部信息 -->
            <div class="desc">
                <div class="left">全部评论( {{ data.comm_count }} )</div>
                <div class="right">
                    <span>{{ data.like_count }}赞</span>
                    <span class="line"></span>
                    <span>{{ data.read_count }}阅读</span>
                </div>
            </div>

            <!-- 评论列表 -->
            <van-list
                v-model="loading"
                :finished="finished"
                @load="onLoad"
            >
                <!-- 单个评论项 -->
                <comment-item :e="e" :artId="data.art_id" v-for="(e, i) in commentData" :key="i"></comment-item>
            </van-list>
            <!-- 评论区空状态 -->
            <van-empty v-if="data.comm_count === 0" description="暂时还没有人评论"/>
        </div>

        <!-- 底部操作栏 -->
        <div class="footer">
            <!-- 搜索框 -->
            <van-search
                @click.native="showEdit = true"
                :left-icon="editIcon"
                shape="round"
                placeholder="去评论"
                @input="1"
            />
            <!-- 评论编辑弹出页 -->
            <comment-edit :showEdit="showEdit"
                          :commentId="data.art_id"
                          :target="'article'"
                          @closeShowEdit="showEdit = false"
                          @initDetail="init"
                          @reload="onLoad(true)"></comment-edit>
            <!-- 操作栏四个按钮 -->
            <div class="right">
                <van-badge :content="data.comm_count === 0 ? '' : data.comm_count" max="99" color="#FC6627">
                    <div class="comment">
                        <img src="@/assets/img/btn_comment.svg" alt="">
                        评论
                    </div>
                </van-badge>
                <van-badge :content="data.like_count === 0 ? '' : data.like_count" max="99" color="#FC6627">
                    <div class="like" @click="like">
                        <img :src="isLike === 1 ? likeIconCel : likeIcon" alt="">
                        点赞
                    </div>
                </van-badge>
                <van-badge>
                    <div class="collect" @click="collect">
                        <img :src="isCollect ? collectIconCel : collectIcon" alt="">
                        收藏
                    </div>
                </van-badge>
                <van-badge>
                    <div class="share" @click="showShare = true">
                        <img src="@/assets/img/btn_share.svg" alt="">
                        分享
                    </div>
                </van-badge>
            </div>
        </div>
    </div>
</template>
<script>
import { delCollect, delFollowing, delLike, getCollect, getDetail, getFollowing, getLike } from '@/api/article'
import { getComment } from '@/api/comment'
import { Toast } from 'vant'

export default {
    name: 'DetailPage',
    data () {
        return {
            // 文章内容
            data: {},
            // 评论区数据
            commentData: [],
            // 评论区分页所需的偏移量
            offset: '',
            loading: false,
            finished: false,
            isFollow: false,
            // 对文章的状态：-1无状态，0不喜欢，1喜欢
            isLike: -1,
            isCollect: false,
            showShare: false,
            showEdit: false,
            // 分享页面选项
            options: [
                [
                    { name: '微信', icon: 'wechat' },
                    { name: '朋友圈', icon: 'wechat-moments' },
                    { name: '微博', icon: 'weibo' },
                    { name: 'QQ', icon: 'qq' }
                ],
                [
                    { name: '复制链接', icon: 'link' },
                    { name: '分享海报', icon: 'poster' },
                    { name: '二维码', icon: 'qrcode' },
                    { name: '小程序码', icon: 'weapp-qrcode' }
                ]
            ],
            editIcon: require('@/assets/img/圆角-编辑.png'),
            likeIcon: require('@/assets/img/btn_like2.svg'),
            likeIconCel: require('@/assets/img/btn_like_sel.svg'),
            collectIcon: require('@/assets/img/btn_colletc.svg'),
            collectIconCel: require('@/assets/img/btn_collect_sel.svg')
        }
    },
    methods: {
        // 获取文章内容
        async init () {
            const resDetail = await getDetail(this.$route.params.id)
            this.data = resDetail.data.data
            this.isFollow = !resDetail.data.data.is_followed
            this.isCollect = resDetail.data.data.is_collected
            this.isLike = resDetail.data.data.attitude
            this.followChange()
            console.log(resDetail)
        },
        // 加载评论区列表。reload用于发表评论时，不偏移重新加载评论区
        async onLoad (reload) {
            if (reload) {
                this.offset = ''
                this.commentData = []
            }
            const resComment = await getComment({
                type: 'a',
                source: this.$route.params.id,
                offset: this.offset,
                limit: 10
            })
            this.commentData = this.commentData.concat(resComment.data.data.results)
            if (this.commentData.length === resComment.data.data.total_count) this.finished = true
            // 当评论数据为不空时，把偏移量设置为最后一个评论的id
            // slice(起始索引, 结束索引)
            // slice(-1)表示起始索引为倒数第一个元素
            if (this.commentData.length) this.offset = this.commentData.slice(-1)[0].com_id
            this.loading = false
        },
        // 收藏
        async collect () {
            if (this.isCollect) {
                await delCollect(this.data.art_id)
                await this.init()
                Toast.success('已取消收藏')
            } else {
                await getCollect(this.data.art_id)
                await this.init()
                Toast.success('收藏成功')
            }
        },
        // 点赞
        async like () {
            if (this.isLike === 1) {
                await delLike(this.data.art_id)
                await this.init()
                Toast.success('已取消点赞')
            } else {
                await getLike(this.data.art_id)
                await this.init()
                Toast.success('点赞成功')
            }
        },
        // 关注
        async following () {
            // 用于操作DOM修改按钮样式
            this.followChange()
            if (this.isFollow) {
                await getFollowing({ target: this.data.aut_id })
                Toast.success('关注成功')
            } else {
                await delFollowing(this.data.aut_id)
                Toast.success('已取消关注')
            }
        },
        // 操作DOM修改按钮样式
        followChange () {
            if (!this.isFollow) {
                this.$refs.follow.innerHTML = '已关注'
                this.$refs.follow.classList.add('followed')
                this.$refs.btnFollow.innerHTML = '已关注'
                this.$refs.btnFollow.classList.add('btnFollowed')
                this.isFollow = true
            } else {
                this.$refs.follow.innerHTML = '关注'
                this.$refs.follow.classList.remove('followed')
                this.$refs.btnFollow.innerHTML = '关注'
                this.$refs.btnFollow.classList.remove('btnFollowed')
                this.isFollow = false
            }
        },
    },
    created () {
        this.init()
    }
}
</script>
<style scoped lang="less">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.detail {
    width: 100%;

    .nav-header {
        position: sticky;
        top: 0;
        color: #3A3948;
        background-color: white;
        height: 44px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px;
        border: 1px solid #F0F0F0;

        .left {
            display: flex;
            align-items: center;

            .back {
                height: 15px;
                margin-right: 16px;
            }

            .userBox {
                display: flex;
                align-items: center;

                .avatar {
                    width: 24px;
                    height: 24px;
                    border-radius: 12px;
                    margin-right: 8px;
                }

                .line {
                    display: block;
                    background-color: #BFC2CB;
                    width: 1px;
                    height: 12px;
                    margin: 0 7px;
                }

                .follow {
                    color: #DE644B;
                    font-weight: 600;
                }

                .followed {
                    color: #CCCCCC;
                }
            }
        }

        .share {
            width: 16px;
        }
    }

    .detailHeader {

        padding: 18px 16px;
        border-bottom: 1px solid #F0F0F0;
        margin-top: 44px;

        .title {
            width: 100%;
            height: 87px;
            font-size: 23px;
            color: #333333;
            line-height: 29px;
            font-weight: 600;
            margin-bottom: 12px;
        }

        .tagInfo {
            display: flex;
            height: 22px;
            font-size: 12px;
            color: #A5A6AB;
            letter-spacing: 0;
            line-height: 22px;
            font-weight: 400;
            align-items: center;
            margin-bottom: 26px;

            .line {
                width: 1px;
                height: 12px;
                background-color: #BFC2CB;
                margin: 0 8px;
            }
        }

        .user {
            display: flex;
            justify-content: space-between;
            align-items: center;

            div {
                flex: 1;
                display: flex;

                img {
                    width: 34px;
                    height: 34px;
                    border-radius: 17px;
                }

                .username {
                    font-size: 16px;
                    color: #333333;
                    font-weight: 600;
                    margin-left: 12px;
                    line-height: 34px;
                }
            }

            .btnFollow {
                color: #FFFFFF;
                font-size: 14px;
                width: 64px;
                height: 29px;
                border: none;
                background-color: #FC6627;
                border-radius: 18px;
            }

            .btnFollowed {
                border: 1px solid #F0F0F0;
                color: #333333;
                background-color: #F7F8FA;
            }
        }
    }

    .main {
        padding: 0 16px;

        .content {
            word-break: break-all;
            ::v-deep img {
                width: 100%;
            }

            ::v-deep a {
                color: #DE644B;
            }
        }

        .createTime {
            text-align: right;
            font-size: 12px;
            color: #A5A6AB;
            letter-spacing: 0;
            line-height: 12px;
            font-weight: 400;
            margin: 25px 0;
        }
    }

    .division {
        height: 12px;
        background-color: #F7F8FA;
    }

    .comment {
        margin-bottom: 50px;

        .desc {
            display: flex;
            justify-content: space-between;
            padding: 15px 16px 10px;

            .left {
                font-size: 16px;
                font-weight: 600;
            }

            .line {
                display: block;
                background-color: #BFC2CB;
                width: 1px;
                height: 12px;
                margin: 0 7px;
            }

            .right {
                display: flex;
                align-items: center;
                font-size: 12px;
                color: #A5A6AB;
            }
        }
    }

    .footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 44px;
        background-color: white;
        display: flex;
        align-items: center;
        border: 1px solid #F0F0F0;
        padding: 0 15px;

        .right {
            display: flex;
            flex: 1;

            ::v-deep .van-badge__wrapper {
                flex: 1;
            }

            ::v-deep .van-badge--fixed {
                right: 8px;
            }

            .comment, .like, .collect, .share {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-direction: column;
                margin: 0;
                font-size: 10px;
            }

            img {
                height: 20px;
                margin-bottom: 2px;
            }
        }

        .edit {
            padding: 0 12px;

            .header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 44px;

                > img {
                    height: 15px;
                    margin-right: 16px;
                }

                .title {
                    font-weight: 600;
                    font-size: 17px;
                    color: #323233;
                }

                .publish {
                    font-weight: 600;
                    font-size: 14px;
                    color: #FC6627;
                }
            }

            .clear {
                display: flex;
                justify-content: right;

                span {
                    font-weight: 600;
                    font-size: 14px;
                    color: #969799;
                }
            }

            ::v-deep .van-field {
                background-color: #F7F8FA;
                border-radius: 12px;
                padding: 8px;
                margin: 20px 0 10px;
            }
        }

        ::v-deep .van-search {
            width: 170px;
        }

        ::v-deep .van-icon__image {
            margin: 3px 5px 0 10px;
        }
    }
}
</style>
